<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ElIcon } from 'element-plus'
import { isNumber } from 'lodash-es'
import * as ElIconVue from '@element-plus/icons-vue'

/** == 注意 ==
 * 需要在.env中，设置iconfont.js的路径
 * 本文件被任意使用一次时，均会自动导入该文件到页面中
 */
const loadIconfontJs = () => {
	const script = document?.createElement('script')
	script.src = import.meta.env.VITE_ICONFONT_URL
	document?.body.append(script)

	const style = document?.createElement('style')
	style.innerHTML = `.icon-font {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}`
	document?.head.append(style)
}
loadIconfontJs()

/**
 * @component icon-font
 * @description 可同时使用 iconfont.cn 的图标和 @element-plus/icons-vue 图标
 */

const props = defineProps({
	/** iconfont图标名，优先级较高 */
	icon: {
		type: String,
	},
	/** element-icon 只需传入名称即可 */
	eicon: {
		type: String,
	},
	/** iconfont前缀 */
	prefix: {
		type: String,
		default: 'icon-font',
	},
	/** 图标尺寸 */
	size: {
		type: [String, Number],
		default: 24,
	},
	/** 图标颜色 */
	color: {
		type: String,
	},
})

const renderStyle = computed(() => {
	return {
		fontSize: isNumber(props.size) ? `${props.size}px` : props.size,
		color: props.color,
	}
})
</script>

<template>
	<svg v-if="icon" :class="[prefix]" aria-hidden="true" :style="renderStyle">
		<use :xlink:href="`#${icon}`"></use>
	</svg>
	<el-icon v-else-if="eicon && ElIconVue[eicon]" :style="renderStyle">
		<component :is="ElIconVue[eicon]" />
	</el-icon>
</template>
